<template>
  <div class="consult_class">
    <Header />
    <div class="login_form">
      <div class="title">咨询师认证</div>
      <div class="title_class">请选择咨询师分类</div>
      <div class="consult_class">
        <template v-if="show">
          <div
            class="consult_class_name"
            v-for="(item, index) in consType"
            :key="index"
            @click="showChanese(item.id)"
          >
            {{ item.class }}
          </div>
        </template>

        <template v-if="!show">
          <div
            class="consult_class_name"
            v-for="(itemChild, indexChild) in consTypeChild"
            :key="indexChild"
            :class="consTypeChild.length > 3 ? 'active' : ''"
            @click="toregist(itemChild.id)"
          >
            {{ itemChild.class }}
          </div>
        </template>
      </div>
    </div>
     
  </div>
</template>

<script>
import { getConsgroup } from "../api/index/index";
export default {
  data() {
    return {
      cons_ida: "",
      cons_idb: "",
      consType: [],
      consTypeChild: [],
      code: "",
      show: true,
      count: "",
      type: "",
    };
  },
  mounted() {
    let vm = this;
    vm.type = this.$route.query.id;
    vm.getConsType();
  },
  methods: {
    showChanese(id) {
      let vm = this;
      this.show = false;
      vm.getConsTypes(id);
    },
    getConsType() {
      let vm = this;
      vm.getConsgroup();
    },
    async getConsgroup(data) {
      let vm = this;
      const res = await getConsgroup(data);
      console.log(res);
      vm.consType = res.data.data;
      console.log(vm.consType, "咨询师分类");
    },
    //二级
    getConsTypes(id) {
      let vm = this;
      //这个cons_id就是一级id,用一级id来请求的二级数据
      vm.cons_ida = id;
      let params = {
        id: id,
      };
      //子分类
      vm.getConsgroup1(params);
    },
    async getConsgroup1(data) {
      let vm = this;
      const res = await getConsgroup(data);
      console.log(res, "二级");
      vm.consTypeChild = res.data.data;
    },
    toregist(id) {
      var cons_idb = id;
      console.log(cons_idb);
      this.$router.push(
        "/regist?id=" +
          this.type +
          "&cons_ida=" +
          this.cons_ida +
          "&cons_idb=" +
          cons_idb
      );
    },
  },
};
</script>

<style lang="less" scoped>
.login_form {
  height: 674px;
  width: 375px;
  margin-top: 6px;
  background: url("../assets/image/Component 149.png") no-repeat 100%;

  .title {
    height: 27px;
    width: 108px;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    color: #ffffff;
    margin-left: 140px;
    padding-top: 97px;
  }
  .title_class {
    font-size: 18px;
    line-height: 27px;
    color: #ffffff;
    margin-left: 114px;
    padding-top: 25px;
  }
  .consult_class {
    width: 341px;
    margin-left: 16px;
    margin-top: 45px;
    display: flex;
    align-content: center;
    justify-self: start;
    flex-wrap: wrap;

    .consult_class_name {
      width: 95px;
      height: 36px;
      text-align: center;
      border: 1px solid #fff;
      line-height: 36px;
      font-size: 14px;
      margin: 0 8px;
      color: #fff;
    }
    .active {
      width: 34%;
      margin: 0 23px 19px;
    }
  }
}
</style>